<script setup lang="ts">
import "@/assets/css/chat/styles.css";
import { ref, reactive, onMounted } from "vue";
import { postWorkflow } from "@/api/dify";
import { useDarkMode } from "@/hooks/useToggleDarkMode";

const isLoading = ref(true); // 用于控制加载状态
const newMessage = ref("思考中,请稍后..."); // 默认消息

// 页面加载时调用 fetchApplications 获取数据
onMounted(() => {
  fetchApplications();
});

// 获取应用信息并更新页面数据
const fetchApplications = async () => {
  try {
    isLoading.value = true; // **开始加载**
    const apiKey = localStorage.getItem("apiKey");
    const response = await postWorkflow(apiKey);

    // 假设响应内容为字符串，直接赋值给 newMessage
    newMessage.value = response;

    isLoading.value = false; // **加载完成**
  } catch (error) {
    console.error("加载应用信息失败:", error);
    newMessage.value = "加载失败，请稍后重试。"; // 如果加载失败，更新为错误信息
  }
};
</script>

<template>
  <div class="container">
    <h1 class="report-title">报告</h1> <!-- 居中的报告 -->
    <p class="message">{{ "　　" + newMessage }}</p> <!-- 添加两个空白字符 -->
  </div>
</template>

<style scoped>
.container {
  text-align: center; /* 使内容居中 */
}

.report-title {
  font-size: 40px; /* 字体较大 */
  font-weight: bold; /* 字体加粗 */
  margin-bottom: 20px; /* 添加下边距 */
}

.message {
  font-size: 20px; /* 默认消息字体大小 */
  white-space: pre-wrap; /* 保留空格 */
}
</style>
